<!doctype html>
<html>

<head>
    <script src="dmxAppConnect/dmxAppConnect.js"></script>
    <!-- <script src="dmxAppConnect/dmxAppConnect.js"></script> -->
    <!-- Required meta tags -->
    <meta charset="UTF-8">
    <title>主页 - 在线拼图游戏</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="fontawesome5/css/all.min.css" />
    <link rel="stylesheet" href="bootstrap/4/css/bootstrap.min.css" />
    <!-- Custom CSS styles-->
    <link rel="stylesheet" href="css/style.css" />

    <!-- Scripts -->
    <script src="js/jquery-3.5.1.slim.min.js"></script>
    <script src="dmxAppConnect/dmxBootstrap4Navigation/dmxBootstrap4Navigation.js" defer=""></script>
    <script src="assets/index.js"></script>
    <script type="text/javascript">
        function randomPuzzles() {
            var num1, num2, num3;
            if(arrFile.length == 0){
                return;
            }
            else if(arrFile.length == 1){
                num1 = num2 = num3 = 0;
            }
            else if(arrFile.length == 2){
                num1 = 0;
                num2 = num3 = 1;
            }
            else{
                num1 = Math.floor(Math.random() * (arrFile.length - 1));
                num2 = Math.floor(Math.random() * (arrFile.length - 1));
                while (num2 == num1) {
                    num2 = Math.floor(Math.random() * (arrFile.length - 1));
                }
                num3 = arrFile.length - 1; // latest puzzle
            }
            console.log(num1, num2, num3);
            document.getElementById("custom1").setAttribute('src', arrFile[num1]);
            document.getElementById("customLink1").setAttribute('href', "game.html?param1=" + arrFile[num1] + "&param2="+arrNameUsr[num1]+"&param3=0");
            document.getElementById("custom-title1").innerHTML=arrName[num1];
            document.getElementById("custom2").setAttribute('src', arrFile[num2]);
            document.getElementById("customLink2").setAttribute('href', "game.html?param1=" + arrFile[num2] + "&param2="+arrNameUsr[num2]+"&param3=0");
            document.getElementById("custom-title2").innerHTML=arrName[num2];
            document.getElementById("custom3").setAttribute('src', arrFile[num3]);
            document.getElementById("customLink3").setAttribute('href', "game.html?param1=" + arrFile[num3] + "&param2="+arrNameUsr[num3]+"&param3=0");
            document.getElementById("custom-title3").innerHTML=arrName[num3];
        }
            
    </script>

    <!-- <script src="dmxAppConnect/dmxS3Upload/dmxS3Upload.js" defer=""></script>
    <script src="dmxAppConnect/bs-custom-file-input/bs-custom-file-input.min.js" defer=""></script> -->
</head>

<body id="index" is="dmx-app">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="index.html"><i class="fa fa-puzzle-piece"></i>&nbsp;在线拼图游戏&nbsp;</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
        <div class="collapse navbar-collapse align-self-start" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active pl-2 pr-2"> <a class="nav-link" href="index.html">主页</a> </li>
                <li class="nav-item pl-2 pr-2"> <a class="nav-link" href="upload.html">创建拼图</a> </li>
                <li class="nav-item pl-2 pr-2"> <a class="nav-link" href="about.html">关于</a> </li>
            </ul>
        </div>
    </nav>


    <section class="bg-white">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <h3 class="section-title">精选拼图&nbsp;</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-12 col-sm-6 col-md-4">
                    <div class="card"> <img class="card-img-top w-auto" src="assets/images/rocket.jpg" alt="Card image cap" width="348" height="232">
                        <div class="card-body">
                            <div style="display:inline;float:left;"><a href="game.html?param1=assets%2Fimages%2Frocket.jpg&amp;param2=%E7%81%AB%E7%AE%AD%E5%8F%91%E5%B0%84&amp;param3=0" class="btn btn-sm btn-secondary">开始拼图</a></div>
                            <div style="display:inline;float:right;">
                                <h5>火箭发射</h5>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-4">
                    <div class="card"> <img class="card-img-top" src="assets/images/valley.png" alt="Card image cap" width="348" height="232">
                        <div class="card-body">
                            <div style="display:inline;float:left;"><a href="game.html?param1=assets%2Fimages%2Fvalley.png&amp;param2=%E5%AF%82%E9%9D%99%E5%B1%B1%E8%B0%B7&amp;param3=0" class="btn btn-sm btn-secondary">开始拼图</a></div>
                            <div style="display:inline;float:right;">
                                <h5>寂静山谷</h5>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-4">
                    <div class="card"> <img class="card-img-top" src="assets/images/anim.jpg" alt="Card image cap" width="348" height="232">
                        <div class="card-body">

                            <div style="display:inline;float:left;">
                                <a href="game.html?param1=assets%2Fimages%2Fanim.jpg&amp;param2=%E5%8A%A8%E6%BC%AB%E5%8E%9F%E7%94%BB&amp;param3=0" class="btn btn-sm btn-secondary">开始拼图</a>
                            </div>
                            <div style="display:inline;float:right;">
                                <h5>动漫原画</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="bg-white">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <h3 class="section-title" style="display: inline-block;">自定义拼图&nbsp;</h3>
                    <button id="btnRestartGame" class="btn btn-outline-dark" style="float:right; transform: scale(0.66);" onclick="randomPuzzles()" style="transform: scale(0.6);"><i class="fas fa-redo"></i></button>
                </div>
            </div>
            <div class="row">
                <div class="col-12 col-sm-6 col-md-4">
                    <div class="card"> <img src="assets/images/800x533.png" class="card-img-top" id="custom1" alt="Card image cap" width="348" height="232">
                        <div class="card-body">
                            <div style="display:inline;float:left;"><a id="customLink1" class="btn btn-sm btn-secondary">开始拼图</a></div>
                            <div style="display:inline;float:right;">
                                <h5 id="custom-title1">1 </h5>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-4">
                    <div class="card"> <img src="assets/images/800x533.png" class="card-img-top" id="custom2" alt="Card image cap" width="348" height="232">
                        <div class="card-body">
                            <div style="display:inline;float:left;"><a id="customLink2" class="btn btn-sm btn-secondary">开始拼图</a></div>
                            <div style="display:inline;float:right;">
                                <h5 id="custom-title2">2 </h5>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-4">
                    <div class="card"> <img src="assets/images/800x533.png" class="card-img-top" id="custom3" alt="Card image cap" width="348" height="232">
                        <div class="card-body">
                            <div style="display:inline;float:left;"><a id="customLink3" class="btn btn-sm btn-secondary">开始拼图</a></div>
                            <div style="display:inline;float:right;">
                                <h5 id="custom-title3">3 </h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- <section class="bg-white">

        <div class="container">
            <div class="row">
                <div class="col">
                    <form action="upload_image.php" method="post" enctype="multipart/form-data">

                        <div class="custom-file mb-3">
                            <input type="file" class="custom-file-input" id="customFile" name="filename">
                            <label class="custom-file-label" for="customFile">选择文件</label>
                        </div>
                        <div class="custom-file mb-3">
                            拼图名称：<input type="text" name="puzzlename">
                        </div>
                        <div class="mt-3">
                            <button type="submit" class="btn btn-secondary">提交</button>
                        </div>

                    </form>


                </div>
            </div>


        </div>
    </section> -->

    <footer class="bg-dark">
        <div class="container">
            <div class="row">
                <div class="col">
                    <p class="text-center small mb-0 pt-2 pb-2 pl-1 pr-1 text-light">&copy; Copyright 2021. All Rights Reserved.</p>
                </div>
            </div>
        </div>
    </footer>

    <!-- Scripts -->
    <script src="bootstrap/4/js/popper.min.js"></script>
    <script src="bootstrap/4/js/bootstrap.min.js"></script>
    <!-- <script>
        // Add the following code if you want the name of the file appear on select
    $(".custom-file-input").on("change", function() {
      var fileName = $(this).val().split("\\").pop();
      $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
    });
    </script> -->

    <script>
        randomPuzzles();
        console.log("here random");
    </script>
</body>

</html>